<template>
  <div v-if="showReminder" class="renewal-reminder">
    <p>⚠️ 您的会员订阅即将到期，请及时续费以继续使用白名单回复功能。</p>
    <router-link to="/subscription">立即续费</router-link>
    <button @click="dismiss">不再提醒</button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

const showReminder = ref(false);

onMounted(async () => {
  try {
    const res = await axios.get('/api/subscriptions/status');
    if (res.data.expiresAt) {
      const expiryDate = new Date(res.data.expiresAt);
      const now = new Date();
      const daysLeft = Math.floor((expiryDate - now) / (1000 * 60 * 60 * 24));
      if (daysLeft <= 3) {
        showReminder.value = true;
      }
    }
  } catch (err) {
    console.error('检查订阅状态失败:', err);
  }
});

const dismiss = () => {
  showReminder.value = false;
};
</script>

<style scoped>
.renewal-reminder {
  background-color: #fff3cd;
  color: #856404;
  border: 1px solid #ffeeba;
  padding: 15px;
  margin: 20px 0;
  border-radius: 4px;
  text-align: center;
}
.renewal-reminder button {
  margin-left: 10px;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  padding: 5px 10px;
  cursor: pointer;
}
</style>